<template>
  <div id="toast-wrap" v-if="visible">
      <div class="toast-content">
          <v-icon v-if="isShowIcon" :name="iconMap[type] || ''" remote class="toast-icon" />
          {{message}}</div>
  </div>
</template>

<script>
const ICON_MAP = {'success': 'basic_finish_line', 'fail': 'basic_error_line'};

export default {
  data () {
      return {
          visible: false,
          type: '', // success 成功  fail 失败
          iconMap: ICON_MAP,
          message: '',
          duration: 3, // 显示时长，秒
          closed: false, // 消息框是否关闭
          timer: null, // 计时器
          tdom: document.body,
          isShowIcon: true // 是否显示图标
      };
  },
  mounted () {
      this.startTimer();
  },
  methods: {
      // 销毁实例
      destroyElement () {
          this.$destroy();
          this.$el.parentNode.removeChild(this.$el);
      },
      // 计时器，根据 duration 去修改组件的开关状态
      startTimer () {
          this.timer = setTimeout(() => {
              if (!this.closed) {
                  this.closed = true;
                  clearTimeout(this.timer);
              }
          }, this.duration * 1000);
      }
  },
  watch: {
      closed (val) {
          if (val) {
              this.visible = false;
              // this.destroyElement();
          }
      }
  }
};
</script>

<style lang="less" scoped>
#toast-wrap {
z-index: 9999;
position: absolute;
top: ~'calc(50% - 22px)';
left: ~'calc(50% - 80px)';
width: 160px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;

.toast-content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80vw;
  // background: var(--color-opacity-5);
  // backdrop-filter: blur(20px);
  // border-radius: 6px;
  border-radius: 12px;
  background: rgba(37, 45, 62, 0.80);
  backdrop-filter: blur(27.182817459106445px);
  padding: 12px 16px;
  text-align: center;
  color: var(--white);
  font-size: 14px;

  .toast-icon {
    margin-right: 10px;
  }
}
}
</style>